<template>
    <!--顶部组件 start-->
    <TopHeader/>
    <!--顶部组件 end-->
    <!--搜索组件 start-->
      <Search/>
    <!--搜索组件 end-->
      <!--中间内容 start-->

      <div class="edu-container edu-data">
        <el-card class="edu-data-intro">
          <div class="register-content">
            <!--注册 start-->
              <div class="register-bg">
                <div class="register-cont">
                  <div class="form-box">
                    <el-form ref="formRef" :rules="rules" :model="memberForm">
                      <legend>会员注册</legend>
                      <el-form-item prop="nickname">
                        <el-input v-model="memberForm.nickname" placeholder="请输入昵称">
                          <template #prefix>
                            <el-icon><User /></el-icon>
                          </template>
                        </el-input>
                      </el-form-item>

                      <el-form-item prop="phone">
                        <el-input v-model="memberForm.phone" placeholder="请输入手机号">
                          <template #prefix>
                            <el-icon><Iphone /></el-icon>
                          </template>
                        </el-input>
                      </el-form-item>

                      <el-form-item prop="password">
                        <el-input type="password" v-model="memberForm.password" placeholder="请输入登录密码">
                          <template #prefix>
                            <el-icon><Lock /></el-icon>
                          </template>
                        </el-input>
                      </el-form-item>

                      <el-form-item>
                        <el-button :loading="subLoading" color="#5e6eba" @click="register(formRef)" style="width: 100%;">
                          提交
                        </el-button>
                      </el-form-item>


                    </el-form>
                  </div>
                </div>
              </div>
            <!--注册 end-->
          </div>
        </el-card>
      </div>

      <!--中间内容 end-->

      <!--底部组件 start-->
      <Footer/>
      <!--底部组件 start-->
    </template>

    <script setup lang="ts">
    import TopHeader from "@/views/edu/comm/TopHeader.vue"
    import Search from "@/views/edu/comm/Search.vue"
    import Footer from "@/views/edu/comm/Footer.vue"
    import { ref,reactive } from 'vue'
    import {ElMessage,FormInstance,FormRules} from 'element-plus'
    import {registerApi} from "@/api/edu/index"
    import router from "@/router";
    // 表单实例对象
    const formRef = ref<FormInstance>()
    // 表单约束规则对象
    const rules = reactive<FormRules>({
      nickname: [{required: true,message: '会员昵称不能为空',trigger: 'blur'}],
      phone: [{required:true,message: '手机号不能为空',trigger: 'blur'}],
      password: [{required: true,message: '登录密码不能为空',trigger: 'blur'}]
    })
    // 提交按钮状态
    const subLoading = ref(false)
    // 表单数据对象
    const memberForm = reactive({
      nickname: 'cesss',
      phone: '19948765606',
      password: '123456'
    })
    // 提交注册表单
    const register = async (formEl: FormInstance |undefined)=> {
      if(!formEl)return
      await formEl.validate(async (valid,fields)=> {
        subLoading.value = true
        if(valid){
          const { data } = await registerApi(memberForm)
          if(data.status=== 200){
            router.push({
              path: '/index'
            })
            ElMessage.success(data.message)
          }else {
            ElMessage.error(data.message)
          }
        }else {
          ElMessage.error('提交表单失败，你还有未填写的项！')
        }
      })
      subLoading.value = false
    }
    </script>

    <style scoped>
    .edu-container {
      width: 1350px;
      padding: 0;
      position: relative;
      margin: 0 auto;
      box-sizing: border-box;
    }
    .edu-data-intro {
      margin: 30px 0;
      background-color: #fff;
    }

    .register-content .register-bg{
      width: 100%;
      background: url(@/assets/edu/images/load_bg.jpg) no-repeat;
      background-size: cover;
    }
    .register-content .register-bg .register-cont {
      height: 772px;
      position: relative;
    }

    .register-content .register-bg .register-cont .form-box {
      width: 300px;
      height: 390px;
      border: 1px solid #d9dadc;
      background: #fff;
      position: absolute;
      top: 196px;
      right: 90px;
      padding: 0 30px;
    }
    .register-content .register-bg .register-cont .form-box legend {
      font-size: 20px;
      color: #323232;
      text-align: center;
      padding: 50px 0;
    }
    </style>
